<template>
<view class="order">	
	<scroll-view v-if="orderList.length || status == 'loading'" scroll-y="true" lower-threshold="50" @scrolltolower="lower" style="width: 100%; height: 100%;">
		<ad unit-id="adunit-020f6b51600a2abd"></ad>
		<view class="order-item" v-for="v in orderList" :key="v.orderId" @click="clickOrder(v.orderId)">
			<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #cdcdcd; font-size: 26upx; line-height: 1.8;">
				<text>订单号：{{ v.orderId }}</text>
				<text>{{ v.rentTime }}</text>
			</view>
			<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #000000; font-size: 26upx; line-height: 1.8;">
				<text>租借地点</text>
				<text>{{ v.shopName }}</text>
			</view>
			<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #000000; font-size: 26upx; line-height: 1.8;">
				<text>状 态</text>
				<text>{{ order[ v.orderStatus ] }}({{ charge[ v.chargeStatus ] }})</text>
			</view>
			<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #000000; font-size: 26upx; line-height: 1.8;">
				<view style="height: 44upx; line-height: 44upx; width: 240upx">
					<image src="../../static/time.png" style="width: 40upx; height: 40upx; vertical-align: middle;"></image>		
					<text style="vertical-align: middle; margin-left: 12upx;">{{ v.timeTxt }}</text>			
				</view>
				<view style="height: 44upx; line-height: 44upx; width: 240upx;">
					<image src="../../static/money.png" style="width: 40upx; height: 40upx; vertical-align: middle;"></image>		
					<text style="vertical-align: middle; margin-left: 12upx;">{{ v.realExpense || v.realExpense == 0 ? v.realExpense + '元' : '尚未结算' }}</text>
				</view>
				<text style="color: #ef7738; font-weight: bold; font-size: 30upx; width: 120upx;">{{ v.orderStatus == 0 ? '使用中' : '使用完成' }}</text>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="{ contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '小童只记录到这里啦～' }"></uni-load-more>
	</scroll-view>
	<view v-else style="width: 100%; overflow: hidden;">
		<image src="/static/empty.png" style="width: 279upx; height: 158upx; display: block; margin: 400upx auto 0;"></image>
		<view style="margin-top: 50upx; text-align: center; color: #4e6a75; font-size: 30upx;">暂无电小童订单</view>
	</view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			orderList: [],
			status: 'more',
			page: 1,
			order: [ '租借中', '已归还', '已撤销', '超时' ],
			charge: [ '未付款', '待支付', '已付款', '退款' ]
		}
	},
	methods: {
		scanCode() {},
		lower() {
			if(this.status=='noMore') return ;
			this.status='loading';		
			http.request({
				url: `orderFormController/myOrderList?page=${this.page}&size=6`,
				method: 'get',
				success: (res) => {		
					let json = res.dataList;
					let list = json.list || [];
					list.forEach(ele => {
						let rentTime = new Date(ele.rentTime.replace(/\-/g, '/')).getTime();
						let returnTime = ele.returnTime ? new Date(ele.returnTime.replace(/\-/g, '/')).getTime() : ( ele.modifyTime ? new Date(ele.modifyTime.replace(/\-/g, '/')).getTime() : new Date().getTime() );
						let time = Math.floor( (returnTime - rentTime) / 1000 );
						if ( time > 24 * 60 * 60 ) {
							let h = time % ( 24 * 60 * 60 );
							let m = h % ( 24 * 60 * 60 );
							ele.timeTxt = `${ Math.floor( time / ( 24 * 60 * 60 ) ) }天${ Math.floor( h / ( 60 * 60 ) ) == 0 ? 1 : Math.floor( h / ( 60 * 60 ) ) }小时`;
						} else if ( time > 60 * 60 ) {
							let m = time % ( 60 * 60 );
							ele.timeTxt = `${ Math.floor( time / ( 60 * 60 ) ) }小时${ Math.floor( m / 60 ) == 0 ? 1 : Math.floor( m / 60 ) }分钟`;
						} else if ( time > 60 ) {
							ele.timeTxt = `${ Math.floor( time / 60 ) }分钟`;
						} else {
							ele.timeTxt = `${ time }秒`;
						}
					});
					this.orderList.push( ...list );
					if ( json.isLastPage ) { this.status='noMore'; }
					else{ this.status = 'more'; }
					this.page++;					
				}
			});
		},
		clickOrder(orderId) {
			uni.navigateTo({ url: 'dingdanxiangqing?id='+orderId });			
		}
	},
	onLoad() {
		this.orderList=[];
		this.page=1;
		this.status='loading';
		this.lower();
	}
}
</script>

<style>
.order {
	height: 100vh;
	position: relative;
	background: #f7f7f7;
	font-size: 30upx;
	overflow: auto;
}
.order-item {
	width: 690upx;
	height: 232upx;
	margin: 15upx auto;
	background-color: #ffffff;
	box-shadow: 0upx 3upx 10upx 0upx rgba(241, 243, 245, 0.54);
	border-radius: 30upx;
	box-sizing: border-box;
	padding: 20upx;
}

.order .box-item {
	width: 670upx;
	margin: 0 auto;
	border-bottom: 2upx solid #ebebeb;
	margin-bottom: 16upx;
}
.order .title {
	height: 70upx;;
	line-height: 70upx;
	color: #000000;
	opacity: 0.5;
}
.order .item {
	height: 64upx;;
	line-height: 64upx;
	color: #000000;
}
.order .left,.right {
	width: 50%;
	display: inline-block;
	box-sizing: border-box;
}
.order .left {
	text-align: left;
}
.order .right {
	text-align: right;
}
</style>
